import {Card, Button, Form, Radio, Space, Input, Checkbox, Statistic, message} from 'antd'
import { useStore } from '@/store'
import { useState, useEffect } from 'react'
import {useNavigate, useSearchParams} from 'react-router-dom'

const { TextArea } = Input;
const { Countdown } = Statistic;

const deadline = Date.now() + 1000 * 90 * 60;

const OnlineExam = (props) => {
    const [params] = useSearchParams()
    const id = params.get("id")
    const api = "student_exam"
    const { operateStore } = useStore()
    const [answer, setAnswer] = useState() //保存答题信息
    const [items, setItems] = useState() //保存考试信息
    const [details, setDetails] = useState([]) //保存试卷信息
    const [questionsNum, setQuestionsNum] = useState()
    const [form] = Form.useForm()
    const navigate = useNavigate()

    const onFinish = async() => {
        await operateStore.createItem("student_answer", {"student_answer": answer, "student_no": items.student_no, "exam_paper_id": items.exam_paper_id, "student_exam_id": items.id})
        message.success("提交成功！")
        navigate(`/list/student_score`)
    }


    const onValuesChange = async(changeValue, allValues) => {
        for(var key in changeValue){
            document.getElementById("dtk"+key).style.backgroundColor="blue"
        }
        setAnswer(allValues)
    }
    useEffect(() => {
        const loadDetail = async () => {
            const data = await operateStore.getDetails(api, id)
            setItems(data)
            setQuestionsNum(data.nums)
            setDetails(data.questions)
        }
        loadDetail()
      }, [api, id, operateStore])
    
    return (
        <div style={{display:"inline"}}>
            <div style={{width:"80%", overflowY: "auto", float: 'left'}}>
            {details && details.length > 0 && (
                <Card>
                    <Form
                        form={form}
                        layout="vertical"
                        onValuesChange={onValuesChange}
                        >
                        {details.map(item => {
                        return <>
                            <p>
                                <span style={{fontWeight: "bold", fontSize: "16px"}}>
                                    {item.title}
                                </span>
                            </p>
                            {item.questions.map(data => {
                                if(data.subject_type === "single"){
                                    return   <Form.Item label={data.no + "." + data.subject} name={data.no} key={data.no}>
                                                <Radio.Group key={data.id}>
                                                    <Space direction="vertical">
                                                        <Radio value={'A'}>{"A."+data.optionA}</Radio>
                                                        <Radio value={'B'}>{"B."+data.optionB}</Radio>
                                                        <Radio value={'C'}>{"C."+data.optionC}</Radio>
                                                        <Radio value={'D'}>{"D."+data.optionD}</Radio>
                                                    </Space>
                                                </Radio.Group>
                                            </Form.Item>
                                }else if(data.subject_type === "multiple"){
                                    return   <Form.Item label={data.no + "." + data.subject} name={data.no} key={data.no}>
                                                <Checkbox.Group>
                                                    <Space direction="vertical">
                                                        <Checkbox defaultChecked={false} value={'A'}>{"A."+data.optionA}</Checkbox>
                                                        <Checkbox defaultChecked={false} value={'B'}>{"B."+data.optionB}</Checkbox>
                                                        <Checkbox defaultChecked={false} value={'C'}>{"C."+data.optionC}</Checkbox>
                                                        <Checkbox defaultChecked={false} value={'D'}>{"D."+data.optionD}</Checkbox>
                                                    </Space>
                                                </Checkbox.Group>
                                            </Form.Item>
                                }else{
                                    return   <Form.Item label={data.no + "." + data.subject}  name={data.no} key={data.no}>
                                                <TextArea rows={6} />
                                            </Form.Item>
                                }
                            })}
                            </>
                        })}
                    </Form>
                </Card>
            )}
            </div>
            <div style={{width:"20%", float:'right', paddingLeft: "5px"}}>  
                    <div className="site-card-wrapper">
                            <Card title="" bordered={false}>
                             <Countdown title="倒计时:" value={deadline} onFinish={onFinish}  format="HH:mm:ss" />
                            </Card>
                            {questionsNum && questionsNum.length > 0 && (
                                <Card title="" bordered={false}>
                                <p>
                                    <span>答题卡:</span>
                                    <div style={{display: "flex", flexWrap: "wrap", alignItems: "center"}}>
                                        <span>未答</span>
                                        <div style={{ width: "20px", height:"20px", backgroundColor: "red"}} />
                                        <span>已答</span>
                                        <div  style={{ width: "20px", height:"20px", backgroundColor: "blue"}} />
                                    </div>
                                </p>
                                <div style={{display: "flex", flexWrap: "wrap", alignItems: "center"}}>
                                    {questionsNum.map(item => {
                                        return <div id = {"dtk"+item}
                                                style={{ width: "25px", height:"25px", backgroundColor: "red", margin: "5px", textAlign: "center"}}>{item}</div>
                                    })}
                                </div>
                                </Card>
                            )}                               
                  
                            <Card title="" bordered={false}>
                                <Button size="middle" type="primary" onClick={onFinish}>交卷</Button>
                            </Card>
                    </div>
            </div>
        </div>
    )
} 

export default OnlineExam